<template>
  <!--4.编辑窗口-->
  <el-dialog title="编辑" :visible.sync="showDialog"  width="30%" append-to-body :close-on-click-modal="false" @close="" >
    <el-form ref="baseFormSave"  label-width="110px" label-position="left" :model="saveData" :rules="saveRules">
      <div v-for="(itemCfg,index) in saveCfgArr" :key="index" >
        <el-form-item v-if="itemCfg.slotName"  :label="itemCfg.label" :prop="itemCfg.name" >
          <slot :data="saveData[itemCfg.name]" :name="itemCfg.slotName"></slot>
        </el-form-item>
        <SaveItem v-else :itemCfg="itemCfg"  :saveData="saveData"/>
      </div>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="saveDialog = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
  </el-dialog>

</template>

<script>
  import SaveItem from './SaveItem'
	export default {
		name:'BaseSave',
    components:{SaveItem},
		props:['width','saveCfgArr','saveRules','saveApi','parentComponentId'],
		methods: {
		  initWidth(){
        if(this.width){
         this.dialogWidth=this.width+'px'
          this.itemWidth=document.documentElement.clientWidth/100*this.width
        }else {
          this.itemWidth=document.documentElement.clientWidth/100*50
        }
      },
      save(){
        let parse = JSON.parse(JSON.stringify(this.saveData));
        parse.allowedFileType=parse.allowedFileType.join(',')
        this.$refs.baseFormSave.validate(async (valid) => {
          if (valid) {
            this.saveApi(parse ).then(resp => {
              this.$bus.$emit(this.parentComponentId+'dataList')
              this.$refs['baseFormSave'].resetFields();
              this.showDialog=false
            })
          } else {
            return false
          }
        })

      },
		},
    data(){
		  return{
        showDialog:false,
        itemWidth:'',
        dialogWidth:'50%',
        treeData: [],
        saveData:'',
        cascadeProps:{
          value: "departmentId",
          label: "name",
          children: "children",
          emitPath:false,
          checkStrictly: true
        },
      }
    },
    mounted() {
		  this.initWidth()
      this.$bus.$on('baseSaveOpen',(data)=>{
          this.saveData=data
          this.showDialog=true
      })
    },
    computed:{

    },
    beforeDestroy() {
      this.$bus.$off('baseSaveOpen')
    },
  }
</script>

<style scoped>

</style>
